import { createWebHashHistory, createRouter } from 'vue-router'
import { h } from 'vue'

import Home from './views/Home.vue'
import Doc from './views/Doc.vue'

import SwitchComponent from './components/doc/SwitchComponent.vue'
import ButtonComponent from './components/doc/ButtonComponent.vue'
import DialogComponent from './components/doc/DialogComponent.vue'
import TabsComponent from './components/doc/TabsComponent.vue'
import Markdown from './components/Markdown.vue'

import intro from './markdown/intro.md'
import install from './markdown/install.md'
import start from './markdown/start.md'

const history = createWebHashHistory()

const md =  string  => h(Markdown, { content: string, key: string})

export const router = createRouter({
    history: history,
    routes: [
        { 
            path: '/', 
            component: Home 
        },
        { 
            path: '/doc', 
            component: Doc, 
            children: [
                {
                    path: '',
                    redirect: '/doc/intro'
                },
                {
                    path: 'intro',
                    component: md(intro)
                },
                {
                    path: 'install',
                    component: md(install)
                },
                {
                    path: 'start',
                    component: md(start)
                },
                {
                    path: 'switch',
                    component: SwitchComponent
                },
                {
                    path: 'button',
                    component: ButtonComponent
                }, 
                {
                    path: 'dialog',
                    component: DialogComponent
                }, 
                {
                    path: 'tabs',
                    component: TabsComponent
                }
            ]
        }
    ]
})